<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/common.css" rel="stylesheet"/>
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <link rel="stylesheet" href="css/mui.min.css" />
    <link rel="stylesheet" href="css/mui.picker.min.css" />
    <style type="text/css" id="sty">
    	.content{
    		border-top: 5px solid #eeeeee;
    		background: transparent;
    	}
    	.title{
    		height: 35px;
    		background: #FFF;
    		margin: 5px 0;
			width: 135%;
			overflow: scroll;
    	}
    	.title div{
    		color: #999;
    		display: inline-block;
    		width: 32%;
    		text-align: center;
    		font-size: 1.6rem;
    		line-height: 30px;
    		width: 25%;
    		float: left;
    	}
    	::-webkit-scrollbar {
		    width: 0px;
		    height: 0px;
		}
		::-webkit-scrollbar-thumb {
		    border-radius: 5px;
		    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		    background: rgba(0, 0, 0, 0.2);
		} 
    	.title-active span{
    		color: rgb(60,163,255);
    	}
    	.title-active:before{
    		content: '';
		    display: block;
		    width: 40px;
		    height: 3px;
		    left: 40px;
		    bottom: -32px;
		    background: #3CA3FF;
		    position: relative;
    	}
    	.intro{
    		background: #fff;
    		color: #666;
    		font-size: 1.6rem;
			padding: 10px;	
    	}
    	.search{
    		background: #fff;
    		height: 50px;
    	}
    	#search{
    		background-color: #eee;
			border: none;
			height: 30px;
			width: 70%;
			border-radius: 18px;
			text-indent: 7px;
    	}
		input::-webkit-input-placeholder {
		  /* WebKit browsers */
		  text-align: right;
		}
		input:-moz-placeholder {
		  /* Mozilla Firefox 4 to 18 */
		  text-align: right;
		}
		input:-ms-input-placeholder {
		  /* Internet Explorer 10 */
		  text-align: right;
		}
		input::placeholder {
		  text-align: right;
		}
		textarea{
			border: none;
			font-size: 1.4rem;
		}
		.process-pic{
			margin-top: 10px;
			background: #fff;
		}
		.process-pic div{
			width: 32%;
			margin: 25px 0;
		}
		.process-pic div{
			text-align: center;
			display: inline-block;
		}
		.process-pic div img{
			width: 75%;
		}
		.sign-btn{
			width: 100%;
			height: 150px;
			text-align: center;
			background: #fff;
		}
		.sign-btn div{
			height:40px;
			width: 100px;
			background: #3CA3FF;
			color: #fff;
			font-size: 1.6rem;
			line-height: 40px;
			margin: 0 auto;
			border-radius:12px ;
			margin-bottom: 20px;
		}
		.add-work{
			height: 40px;
			line-height: 40px;
			background: #fff;
			margin-top: 10px;
			padding: 0 15px;
		}
		.add-work p{
			text-align: right;
			color: #3CA3FF;
			font-size: 1.6rem;
			font-weight: bold;
		}
		.icon-add{
			font-size: 1.8rem;
			margin-left: 8px;
		}
		.sub-btn{
			text-align: center;
			width: 100%;
			height: 50px;
			color: #fff;
			background: #3CA3FF;
			line-height: 50px;
			font-size: 2rem;
			margin-top: 20px;
		}
		.apply{
			background: #fff;
			padding: 0 15px;
			padding-top: 10px;
			margin-top: 10px;
		}
		.acon{
			float: left;
			font-size: 1.4rem;
			color: #333;
		}
		.app-num{
			width: 16px;
			height: 16px;
			border-radius: 8px;
			background: #999;
			color: #fff;
			text-align: center;
			font-size: 1.2rem;
			line-height: 16px;
			margin-right: 10px;
		}
		.app-name{
			width: 40%;
			margin-right: 10px;
		}
		.one{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		    -webkit-box-orient: vertical;
		}
		.app-time{
			width: 30%;
		}
		.app-close{
			float: right;
		}
		.gaps
			border: none;
			height: 3px;
			margin-left: 26px;
			border-bottom: 1.5px dashed #eee;
		}
		.app-content,.app-con{
			margin-left: 26px;
			display: none;
		}
		.app-content div{
			display: inline-block;
			font-size: 1.4rem;
			color: #666;
			width: 49%;
		}
		.ri{
			text-align: right;
		}
		.introduction{
			padding: 0 15px;
		}
		.introduction p{
			font-size: 1.2rem;
		}
		.fujian{
			background: #fff;
			padding: 15px 15px;
			margin-top: 10px;
		}
		.fujian img{
			width: 100px;
			margin-right: 10px;
		}
		
		
	.detail-time>div{
      	font-size: 1.3rem;
      	color: #999;
      }
      .timeinfo{
      	float: left;
	    width: 17%;
	    margin-right: 4%;
	    text-align: right;
	    height: 42px;
      }
      .detail-time p{
      	margin-bottom: 0;}
      .proicon{
      	float: left;
	    /*padding-top: 13px;*/
      }
      .proicon img{
      	width: 20px;
    	margin-left: -5px;
      }
      .contentinfo{
      	float: left;
		margin-left: 4%;
      }
      .icon-xiangxia{
      	color: #dbdbdb;
      	font-size: 1rem;
      }
      .now{
      	/*执行状态蓝色*/
      	color: #3CA3FF!important;
      }
      .detail-time:last-child .gap{
      	display: none;
      }
      .gap{
      	height: 35px;border-left: 1px solid #dbdbdb;margin-left: 5px;
      }
      .t1{
      	font-size:1.5rem ;
      	color: #333;
      }
      .t2{
      	font-size: 1.2rem;
      }
      .btn-detail{
      	width: 45px;
      	height: 20px;
      	line-height: 20px;
      	text-align: center;
      	float: right;
      	background: #eee;
      	border-radius: 3px;
      }
      .re-detail{
      		text-align: right;
		    padding-right: 8px;
		    color: #3ca3ff!important;
      	}
      .icon-point{
      	font-size: 1.2rem;
      }
      /*
       * 根据状态（逾期或不满意添加样式）
       */
      .unstat{
      	/*不满意*/
      	color: #EC971F;
  	  }
  	  .ex{
  	  	/*逾期*/
  	  	color: red;
  	  }	
  	  .duban{
  	  	/*按钮为督办*/
  	  	background: #3CA3FF;
  	  	color: #fff!important;
  	  }
  	  
  	  .mui-popover .mui-popover-arrow.mui-bottom{
	    display:none;
		}
	.popo-sub {
	    position:fixed!important;
	    top: 30%!important;
	    left: 10%!important;
	    width: 80%!important;
	    padding:10px;
	    padding-bottom: 40px;
	}
	.popotitle {
	    border-bottom: solid 1px #eee;
	} 
	.popotitle div{
		font-size: 1.4rem;
	    line-height: 40px;
	    color: #999;
	    display: inline-block;
	}
	.ptitle {
	    font-size: 1.5rem;
	    line-height: 30px;
	    color: #333!important;
	    width: 70%;
	}
	
	
	
	/**/
	.on{ color: #4f4f4f; border-bottom: .5rem #0f88ed solid;}
        .none{ border-right: none!important;}

        .pinjia_box{ width: 100%; margin: 1rem 0;padding: .5rem 0;background-color: #fff;color: #3e3b3f;}
        .pinjia_box > p{ font-size: 1.6rem;
           width: 95%;
           color: #333;
            margin-right: auto;
            margin-left: auto;
            /*padding-bottom: .5rem;*/
            border-bottom: 1px #e5e5e5 solid;

        }

        .cont{
            padding: 0;
        margin-right: .5rem;}
        .cont > p{
            font-size: 1.4rem;
            line-height: .2rem;
            margin-top: 1.4rem;
        }

     .text_shuru{
         width: 91%;
         height: 10rem;
         margin-left: .6rem;
         margin-right: 0;
         border: 1px #d2d2d2 solid;
         font-size: 1.6rem;
         padding: .5rem;
     }
     .btn_box{
         text-align: right;
         margin: .5rem 0;
         width: 95%;
         margin-left: .6rem;
     }
        .btn_box > button {
            width: 9rem;
            height: 2.5rem;
            border: none;
            background-color: #41a1f1;
            color: #fff;
            border-radius: 2.5rem;
            font-size: 1.4rem;
        }
        .pinjia_box .input-group:after{	
        	background: transparent;
        }
       
        	
    </style>
</head>
<body>
	<header class="nav">
		<i class="iconfont icon-fanhui" style="float: left;"></i>
	    <span>事项详情</span>
	</header>
	<div style="overflow: scroll;width: 100%;">
		<div class="title">
			<div class="title-active" id="basic"><span>签收批转</span></div>
			<div id="study" style="border-left: 1px solid #eeeeee;border-right: 1px solid #eeeeee;"><span>详细信息</span></div>
			<div id="example" style="border-right: 1px solid #eeeeee;"><span>流转记录</span></div>
			<div id="comment"><span>评价内容</span></div>
		</div>
	</div>
	<div>
		<div class="content basic" >
			<form action="" >
				<div class="input-group">
					<label>表单标题：</label>
					<input value="关于xxx项目" />
				</div>
				<div class="input-group">
					<label>编号：</label>
					<input value="融两表一单[2017]001号" />
				</div>
				<div class="input-group">
					<label>责任单位经办:</label>
				</div>
				<textarea name="" rows="" cols="">可承受的疯狂拉升讲道理三</textarea>
			</form>
			<div class="apply">
				<div class="app-des">
					<div class=" acon app-num">1</div>
					<div class=" acon app-name one">
						预申请单位按报件须知 准备材料向市土发中心 报件
					</div>
					<div class="acon app-time">
						2017/6/20
					</div>
					<div class="acon app-close">
						<i class="iconfont icon-up toggle"></i>
					</div>
					<div class="clear">
					</div>
				</div>
				<hr class="gaps"/>
				<div class="app-content" style="display: none;">
					<div>是否按期完成：<span>是</span></div>
					<div class="ri">责任部分：<span>土地发展中心</span></div>
					<div>责任领导：<span>林文建</span></div>
					<div class="ri">责任人：<span>林有发</span></div>
					
				</div>
				<div class="app-con" style="display: none;">
					<div class="acon" >办理情况：</div>
					<div class="acon" style="width: 75%;">概述概述概述概述概述概述概述概述概述概述概述概述概述</div>
					<div class="clear">
					</div>
				</div>
			</div>
			<div class="apply">
				<div class="app-des">
					<div class=" acon app-num">2</div>
					<div class=" acon app-name one">
						预申请单位按报件须知 准备材料向市土发中心 报件
					</div>
					<div class="acon app-time">
						2017/6/20
					</div>
					<div class="acon app-close">
						<i class="iconfont icon-up toggle"></i>
					</div>
					<div class="clear">
					</div>
				</div>
				<hr class="gaps"/>
				<div class="app-content" style="display: none;">
					<div>是否按期完成：<span>是</span></div>
					<div class="ri">责任部分：<span>土地发展中心</span></div>
					<div>责任领导：<span>林文建</span></div>
					<div class="ri">责任人：<span>林有发</span></div>
					
				</div>
				<div class="app-con" style="display: none;">
					<div class="acon" >办理情况：</div>
					<div class="acon" style="width: 75%;">概述概述概述概述概述概述概述概述概述概述概述概述概述</div>
					<div class="clear">
					</div>
				</div>
			</div>
			<form action="" style="margin-top: 10px;">
				<div class="input-group">
					<label>审批意见:</label>
				</div>
				<textarea name="" rows="" cols="" placeholder="" style="margin: 0;">内容内容内容内容内容内容内容</textarea>
				
				<div class="input-group">
					<label style="width: 50%;color: #333;">是否完成</label>
					<div style="display: inline-block;"><input name="xx" type="radio" id="yes"/><label class="checkl" for="yes">同意</label> </div>
	                <div style="display: inline-block;"><input name="xx" type="radio" id="no"/><label class="checkl" for="no">不同意</label> </div>
				</div>
				<div class="input-group">
					<label>审批人员:</label>
					<select name="">
						<option value="">分管领导A</option>
					</select>
				</div>
			</form>
			<div class="introduction">
				<p>填写说明:</p>
			    <p>1、对各子项目（环节）的办理情况，应按照“格式规范、内容简洁、文字精炼”的原则，逐项进行再梳理、再完善、再核实。</p> 
			    <p>对同一环节涉及多个责任单位的，应将其办理情况统一汇总、整理归纳，对照任务要求重新填写。</p>
			</div>
			<div class="sub-btn">
				申请办结
			</div>
		</div>
		<div class="content study" style="display: none;">
			<form action="" >
				<div class="input-group">
					<label>事项类型：</label>
					<input value="市领导批示件" />
				</div>
				<div class="input-group">
					<label>标题：</label>
					<input value="关于XXX项目" />
				</div>
				<div class="input-group">
					<label>文号：</label>
					<input value="[2017]001号" />
				</div>
				<div class="input-group">
					<label>内容概述:</label>
				</div>
				<textarea name="" rows="" cols="">可承受的疯狂拉升讲道理三</textarea>
			</form>
			<form action="" style="margin-top: 10px;">
				<div class="input-group">
					<label>反馈期限：</label>
					<input type="text" class="date-select" data-options='{"type":"date"}'value="2017-10-10" >
				</div>
			</form>
			<form action="" style="margin-top: 10px;">
				<div class="input-group">
					<label style="width: 25%;">备注：</label>
					<input type="text" value="相关单位将办理落实情况形成书面材料" style="width: 75%;">
				</div>
			</form>
			<div class="fujian">
				<p>附件</p>
				<div>
					<img src="img/fu_03.png"/>
					<img src="img/fu_05.png"/>
				</div>
			</div>
		</div>
		<div class="content example" style="display: none;">
			<div class="" style="padding: 20px 15px;padding-left: 0;background: #fff;">
				<div class="detail-time">
					<div  class="timeinfo">
						<p class="t1">立项</p>
						<p class="t2"></p>
					</div>
					<div  class="proicon">
						<i class="icon-xiangxia iconfont now"></i>
						<div class="gap" style=""></div>
					</div>
					<div  class="contentinfo">
						<p class="t1">市府办工作人员</p>
						<p>2017年03月13日 12:00</p>
					</div>
					<div class="clear">
					</div>
				</div>
				<div class="detail-time">
					<div  class="timeinfo">
						<p class="t1"></p>
						<p class="t2"></p>
					</div>
					<div  class="proicon">
						<i class="icon-xiangxia iconfont now"></i>
						<div class="gap" style=""></div>
					</div>
					<div  class="contentinfo">
						<p class="t1">市府办主任</p>
						<p>2017年03月13日 12:00</p>
					</div>
					<div class="clear">
					</div>
				</div>
				<div class="detail-time">
					<div  class="timeinfo">
						<p class="t1">承办</p>
						<p class="t2 unstat">不满意</p>
					</div>
					<div  class="proicon">
						<img class="pare" src="img/pro_03.png" data="guihua"/>
						<div class="gap" style=""></div>
					</div>
					<div  class="contentinfo">
						<p class="t1">规划局局长</p>
						<p>2017年03月13日 12:00</p>
					</div>
					<div class="btn-detail">详情</div>
					<div class="clear">
					</div>
				</div>
				<div class="detail-time guihua">
					<div  class="timeinfo">
						<p class="t1"></p>
						<p class="t2"></p>
					</div>
					<div  class="proicon">
						<i class="icon-xiangxia iconfont "></i>
						<div class="gap" style=""></div>
					</div>
					<div  class="contentinfo">
						<p class="t1">规划局经办A</p>
						<p>2017年03月13日 12:00</p>
					</div>
					<div class="btn-detail">详情</div>
					<div class="clear">
					</div>
				</div>
				<div class="detail-time">
					<div  class="timeinfo">
						<p class="t1"></p>
						<p class="t2"></p>
					</div>
					<div  class="proicon">
						<img class="pare" src="img/pro_03.png" data="next"/>
						<div class="gap" style=""></div>
					</div>
					<div  class="contentinfo">
						<p class="t1">国土局局长</p>
						<p>2017年03月13日 12:00</p>
					</div>
					<div class="btn-detail">详情</div>
					<div class="clear">
					</div>
				</div>
				<div class="detail-time next">
					<div  class="timeinfo">
						<p class="t1"></p>
						<p class="t2"></p>
					</div>
					<div  class="proicon">
						<i class="icon-xiangxia iconfont "></i>
						<div class="gap" style=""></div>
					</div>
					<div  class="contentinfo">
						<p class="t1">国土局经办A</p>
						<p>2017年03月13日 12:00</p>
					</div>
					<div class="btn-detail">详情</div>
					<div class="clear">
					</div>
				</div>
				<div class="detail-time next">
					<div  class="timeinfo">
						<p class="t1"></p>
						<p class="t2"></p>
					</div>
					<div  class="proicon">
						<i class="icon-xiangxia iconfont"></i>
						<div class="gap" style=""></div>
					</div>
					<div  class="contentinfo">
						<p class="t1">国土局经办B</p>
						<p>2017年03月13日 12:00</p>
					</div>
					<div class="btn-detail">详情</div>
					<div class="clear">
					</div>
				</div>
				<div class="detail-time">
					<div  class="timeinfo">
						<p class="t1">审批</p>
						<p class="t2"></p>
					</div>
					<div  class="proicon">
						<i class="icon-xiangxia iconfont now"></i>
						<div class="gap" style=""></div>
					</div>
					<div  class="contentinfo">
						<p class="t1">市府办工作人员</p>
						<p>2017年03月13日 12:00</p>
					</div>
					<div class="btn-detail">详情</div>
					
					<div class="clear">
					</div>
				</div>
				<div class="detail-time">
					<div  class="timeinfo">
						<p class="t1"></p>
						<p class="t2"></p>
					</div>
					<div  class="proicon">
						<i class="icon-xiangxia iconfont now"></i>
						<div class="gap" style=""></div>
					</div>
					<div  class="contentinfo">
						<p class="t1">市府办主任</p>
						<p>2017年03月13日 12:00</p>
					</div>
					<div class="re-detail">详情</div>
					<div class="btn-detail">详情</div>
					
					<div class="clear">
					</div>
				</div>
				<div class="detail-time">
					<div  class="timeinfo">
						<p class="t1">承办</p>
						<p class="t2 ex">逾期</p>
					</div>
					<div  class="proicon">
						<i class="icon-point iconfont now"></i>
						<div class="gap" style=""></div>
					</div>
					<div  class="contentinfo">
						<p class="t1">规划局局长</p>
						<p>2017年03月13日 12:00</p>
					</div>
					<div class="btn-detail duban">督办</div>
					<div class="clear">
					</div>
				</div>
			</div>

		</div>
		<div class="content comment" style="display: none;">
			<div class="pinjia_box">
		       <p>国土局</p>
				<div class="input-group">
					<div style="display: inline-block;margin: 0 10px;"><input name="xx" type="radio"/>同意 </div>
	                <div style="display: inline-block;margin: 0 10px;"><input name="xx" type="radio"/>不同意</div>
	                <div style="display: inline-block;margin: 0 10px;"><input name="xx" type="radio"/>不同意</div>
	                <div style="display: inline-block;margin: 0 10px;"><input name="xx" type="radio"/>不同意</div>
				</div>
		       <textarea class="text_shuru" placeholder="输入评语"></textarea>
		       <div class="btn_box">
		            <button>完成评价</button>
		       </div>
		   </div>
		
		   <div class="pinjia_box">
		       <p>国土局<font color="#999999" size="-1">（默认评价）</font></p>
		       <div class="input-group">
					<div style="display: inline-block;margin: 0 10px;"><input name="aa" type="radio"/>同意 </div>
	                <div style="display: inline-block;margin: 0 10px;"><input name="aa" type="radio"/>不同意</div>
	                <div style="display: inline-block;margin: 0 10px;"><input name="aa" type="radio"/>不同意</div>
	                <div style="display: inline-block;margin: 0 10px;"><input name="aa" type="radio"/>不同意</div>
				</div>
		       <textarea class="text_shuru">默认满意</textarea>
		       <div class="btn_box">
		           <button>修改评价</button>
		       </div>
		   </div>
		</div>
		<div id="mui-popover" class="mui-popover popo-sub">
		    <div class="popotitle">
		        <div style="width: 30%;">承办对象：</div><div class="ptitle">分管领导A</div>
		    </div>
		    <div class="popotitle">
		        <div style="width: 30%;">抄送市领导：</div><div class="ptitle">分管领导B</div>
		    </div>
		    <div class="popotitle">
		        <div style="width: 30%;float: left;">说明内容：</div><div class="ptitle">备注备注备注备注备注备注备注备注备注备注备注备注备注备注</div>
		    </div>
		</div>
	</div>
	<script type="text/javascript" src="bootstrap/js/jquery.min.js">
		
	</script>
	<script type="text/javascript" src="js/mui.min.js" ></script>
    <script type="text/javascript" src="js/mui.picker.min.js" ></script>
    <script src="js/common.js"></script>
    <!--模板-->
    
    <script>
    	window.onload=function(){
    		mui('.content').on('click','.btn-detail',function(){
    			mui('#mui-popover').popover('toggle');
    		})
    		var Tbtn=document.getElementsByClassName('pare');
    		var hide=[];
    		var sheet=[];
    		var sheet2=[];
    		for (let j=0;j<Tbtn.length;j++) {
    			//有下级过程的节点（如规划局和国土局）给data赋值，根据data的值找到相应的下级节点，点击控制伸缩
    			//流程执行情况可根据类名‘now’,添加该类名及为蓝色。
    			hide[j]=Tbtn[j].getAttribute('data');
       			sheet[j]='.'+hide[j]+'{display:none;}';
       			sheet2[j]='.'+hide[j]+'{display:block;}'
				document.getElementById('sty').insertAdjacentHTML('beforeEnd',sheet[j]);
    			Tbtn[j].addEventListener('click',function(){
    				if(this.getAttribute('src').indexOf('03')>-1){
						this.setAttribute('src',this.getAttribute('src').replace('03','06'));
						document.getElementById('sty').insertAdjacentHTML('beforeEnd',sheet2[j]);
    				}else{
						this.setAttribute('src',this.getAttribute('src').replace('06','03'));
						document.getElementById('sty').insertAdjacentHTML('beforeEnd',sheet[j]);
    					
    				}
    			})
    		}
    		//点击切换模块
    		function toggle(box){
    			console.log(box);
    			document.getElementById(box).addEventListener('click',function(){
    				var x=this.parentNode.children;
    				for(var i=0;i<4;i++){
    					x[i].classList.remove('title-active');
    				}
    				this.classList.add('title-active');
    				var p=document.querySelector('.'+box).parentNode.children;
    				for(var i=0;i<4;i++){
    					p[i].style.display='none';
    				}
    				document.querySelector('.'+box).style.display='block';
    			})
    		}
    		toggle('comment');
    		toggle('study');
    		toggle('basic');
    		toggle('example');
    		//点击切换打开关闭详情状态
    		var list=document.getElementsByClassName('toggle');
    		var list1=document.getElementsByClassName('app-content');
    		var list2=document.getElementsByClassName('app-con');
    		for (let i=0;i<list.length;i++) {
    			console.log(i);
    			list[i].addEventListener('click',function(){
    			console.log(i);
    				if(this.classList.contains('icon-up')){
    					this.classList.remove('icon-up');
    					this.classList.add('icon-down');
    					console.log(document.getElementsByClassName('app-name')[i]);
    					document.getElementsByClassName('app-name')[i].classList.remove('one');
    					list1[i].style.display='block';
    					list2[i].style.display='block';
    				}else{
    					this.classList.add('icon-up');
    					this.classList.remove('icon-down');
    					document.getElementsByClassName('app-name')[i].classList.add('one');
    					list1[i].style.display='none';
    					list2[i].style.display='none';
    				}
    			})
    		}
    		
    	}
    </script>
</body>
</html>
